//模拟服务器上的传递过来的数据
//思路：根据以上的数据动态创建a标签，添加到 .nav盒子中

let apiTypeData = [{
    name: "全部",
    keyword: "身份证实名",
    isnew: false
  },
  {
    name: "生活服务",
    keyword: "银行卡",
    isnew: false
  },
  {
    name: "金融科技",
    keyword: "短信",
    isnew: false
  },
  {
    name: "交通地理",
    keyword: "天气",
    isnew: false
  },
  {
    name: "充值缴费",
    keyword: "短信",
    isnew: false
  },
  {
    name: "数据智能",
    keyword: "手机归属地",
    isnew: false
  },
  {
    name: "企业工商",
    keyword: "IP",
    isnew: false
  },
  {
    name: "应用开发",
    keyword: "手机归属地",
    isnew: false
  },
  {
    name: "电子商务",
    keyword: "IP",
    isnew: false
  },
  {
    name: "吃喝玩乐",
    keyword: "视频",
    isnew: false
  },
  {
    name: "文娱视频",
    keyword: "视频",
    isnew: false
  },
  {
    name: "免费接口大全",
    keyword: "短信",
    isnew: true
  },
  {
    name: "短信",
    keyword: "身份证实名",
    isnew: false
  },
  {
    name: "汽车",
    keyword: "银行卡",
    isnew: false
  },
  {
    name: "核验",
    keyword: "银行卡",
    isnew: false
  },
  {
    name: "最新发布",
    keyword: "银行卡",
    isnew: true
  },
  {
    name: "API私有化部署",
    keyword: "身份证实名",
    isnew: true
  },
]
let apiLink = document.querySelector('.api-link')

//保存组装的数据
let apiNavName = ''
//遍历获取对象name属性,整合为一个数组,组装成a标签

apiTypeData.forEach(function (v) {
  //拼装数据
  //三元运算符判断添加加粗效果
  //添加自定义属性
  apiNavName += `
    <a href = '#' class = "${v.isnew ? 'active' : ''}" data-keyword = "${v.keyword}">${v.name}</a>
    `
})
//把数据放到apiLink里
apiLink.innerHTML = apiNavName;
//点击将内容渲染到search前的文字,把关键字渲染到input里
let searchContent = document.querySelector('.searchContent')
//   console.log(searchContent.textContent);
let search = document.querySelector('.search')
//使用事件委派,给apiLink添加注册事件,将当前事件源的文本渲染到searchContent, 获取当前事件源的自定义属性keyword,渲染给search
//  * 注意: 事件委派中this不能代表当前触发对象,慎用
// *       事件委派中: 事件源 - e.target
apiLink.addEventListener('click', function (e) {
  if (e.target.nodeName == 'A') {
    search.placeholder = e.target.dataset.keyword
    searchContent.textContent = e.target.textContent
  }


})
//判断点击a才执行事件


//API列表区域 模拟服务器返回的数据
let listDataArr = [
  //第一行
  {
    img: "API_01.jpg",
    name: "2021出行防疫政策指南",
    price: "免费",
    isSpecial: false
  },
  {
    img: "API_02.jpg",
    name: "身份证实名认证",
    price: "￥0.2000/次",
    isSpecial: true
  },
  {
    img: "API_03.jpg",
    name: "天气预报",
    price: "免费",
    isSpecial: false
  },
  {
    img: "API_04.jpg",
    name: "银行卡四元素校验",
    price: "￥0.3360/次",
    isSpecial: true
  },
  {
    img: "API_05.jpg",
    name: "短信API服务",
    price: "￥0.0400/次",
    isSpecial: true
  },

  //第二行
  {
    img: "API_01.jpg",
    name: "2021出行防疫政策指南",
    price: "免费",
    isSpecial: false
  },
  {
    img: "API_02.jpg",
    name: "身份证实名认证",
    price: "￥0.2000/次",
    isSpecial: true
  },
  {
    img: "API_03.jpg",
    name: "天气预报",
    price: "免费",
    isSpecial: false
  },
  {
    img: "API_04.jpg",
    name: "银行卡四元素校验",
    price: "￥0.3360/次",
    isSpecial: true
  },
  {
    img: "API_05.jpg",
    name: "短信API服务",
    price: "￥0.0400/次",
    isSpecial: true
  },
  //第三行
  {
    img: "API_01.jpg",
    name: "2021出行防疫政策指南",
    price: "免费",
    isSpecial: false
  },
  {
    img: "API_02.jpg",
    name: "身份证实名认证",
    price: "￥0.2000/次",
    isSpecial: true
  },
  {
    img: "API_03.jpg",
    name: "天气预报",
    price: "免费",
    isSpecial: false
  },
  {
    img: "API_04.jpg",
    name: "银行卡四元素校验",
    price: "￥0.3360/次",
    isSpecial: true
  },
  {
    img: "API_05.jpg",
    name: "短信API服务",
    price: "￥0.0400/次",
    isSpecial: true
  },
  //第四行
  {
    img: "API_01.jpg",
    name: "2021出行防疫政策指南",
    price: "免费",
    isSpecial: false
  },
  {
    img: "API_02.jpg",
    name: "身份证实名认证",
    price: "￥0.2000/次",
    isSpecial: true
  },
  {
    img: "API_03.jpg",
    name: "天气预报",
    price: "免费",
    isSpecial: false
  },
  {
    img: "API_04.jpg",
    name: "银行卡四元素校验",
    price: "￥0.3360/次",
    isSpecial: true
  },
  {
    img: "API_05.jpg",
    name: "短信API服务",
    price: "￥0.0400/次",
    isSpecial: true
  },

]

//获取listDataArr的对象,整合为一个html代码,然后渲染给list-item

//保存html代码
let listHtml = ''

listDataArr.forEach(function (v) {
  listHtml += `
  <li class="list-item fl tcenter pr">
  <span class = "${v.isSpecial ? 'isShow' : ''}">企业专用</span>
  <div class="content">
      <a href = '../html/login.html'><img src="../imgs/${v.img}" alt=""></a>
      <p class="api-name">${v.name}</p>
      <p class="api-price ${v.price === '免费' ? 'gr' : 're'}">${v.price}</p>
  </div>
  <a class="apply-data">申请数据</a>
</li>
  `
})

let apiContent = document.querySelector('.api-content')
apiContent.innerHTML = listHtml




//点击显示蒙层
let applyData = document.querySelectorAll('.apply-data')

let mask = document.querySelector('.mask')

let modal = document.querySelector('.modal')
applyData.forEach(function (dom) {
  dom.addEventListener('click', function () {
    mask.style.display = 'block'
  })
})
//点击蒙层隐藏模态框

mask.addEventListener('click', function () {
  mask.style.display = 'none'

})
//阻止冒泡,点模态框不隐藏
modal.addEventListener('click', function (e) {
  e.stopPropagation()
})



//输入界面效果


let user = document.querySelector('.user')
let password = document.querySelector('.password')
let delIcon1 = document.querySelector('.delIcon1')
let delIcon2 = document.querySelector('.delIcon2')


/**
 *输入用户名()时,验证输入内容的长度是否大于0;  大于: 显示删除按钮, 否则隐藏
 * 事件源: user
 * 事件类型: input keyup
 */

user.addEventListener('input', function () {

  if (user.value.length > 0) {
    delIcon1.style.display = 'block'
  } else {
    delIcon1.style.display = 'none'
  };
})
/**
 *输入密码时,验证输入内容的长度是否大于0;  大于: 显示删除按钮, 否则隐藏
 * 事件源: password
 * 事件类型: input keyup
 */
password.addEventListener('input', function () {

  if (password.value.length > 0) {
    delIcon2.style.display = 'block'
  } else {
    delIcon2.style.display = 'none'
  };
})
//点击删除内容并隐藏自己
delIcon2.addEventListener('click', function () {
  this.previousElementSibling.value = ''
  this.style.display = 'none'
})
delIcon1.addEventListener('click', function () {
  this.previousElementSibling.value = ''
  this.style.display = 'none'
})



//点击注册判断内容,正确就跳转,错误就清空

/**
 * 定义正则表达式
 */

//用户名正则，4到16位（字母，数字，下划线，减号）
let userReg = /^\d{6}$/

// /^[a-zA-Z0-9_-]{4,16}$/

//密码正则
let pwdReg = /^\d{6}$/ //6位数字



let modalMask = document.querySelector('.modal-mask')
// console.log(modalMask);
/**
 * 点击登录按钮, 验证手机号和密码是否合法
 */
let login = document.querySelector('.modal-login')

login.addEventListener('click', function () {
  // console.log(1);

  if (!userReg.test(user.value) && !pwdReg.test(password.value)) { //验证手机号 == 只判断失败情况
    modalMask.style.opacity = 1;
    user.value = ''
    password.value = ''

  } else {
    //跳转页面
    location.href = '../html/home.html'
    user.value = ''
    password.value = ''
  }

})




//选项卡
let span = document.querySelectorAll('.loginBtn')
// console.log(span);

//保存索引
let index = 0;
let change = document.querySelectorAll('.change')
span.forEach(function (dom, i) {
  dom.addEventListener('click', function () {
    //清除上一个样式
    span[index].classList.remove('active')
    //添加样式到当前对象
    this.classList.add('active')
    //清除上一个样式
    change[index].classList.remove('on')

    change[i].classList.add('on')

    index = i;
  })
})